<template>
  <div class="main">
    <div class="drag-top">
      <div style="width: 100%;">
        <label class="text-box" style="margin-top:0;">{{'最高等级：'+maxGrade}}</label>
        <div class="text-box" style="display: flex;">
          <div class="flex"></div> 金币：<div class="money" :class="{active:isMoneyShow}">{{toShowMoney(money)}}</div>
          <div class="flex"></div>
        </div>
        <label class="text-box">{{toShowMoney(sumAddMoney)+'/秒'}}</label>
      </div>
      <div class="max-logo"><img v-show="maxGrade != 0" :src="imgList[maxGrade-1]"></div>
      <div class="max-grade" v-show="maxGrade != 0">{{maxGrade}}</div>
    </div>
    <div class="drag-mian" v-drag="drag">
      <div class="drag-box">
        <div v-for="(item,index) in dragList" :key="index" class="item">
          <div class="logo"><img :class="{active:item.isShow}" :src="imgList[item.grade-1]" /></div>
          <div class="ellipse"></div>
          <div v-show="item.grade != null" class="grade">{{item.grade}}</div>
          <transition name="my-transition">
            <div v-show="!!item.isShow" class="add-money">{{toShowMoney(getAddNum(item.grade) *
              2)}}金币</div>
          </transition>
        </div>
        <div :style="{left:activeDrag.left,top:activeDrag.top,width:dragItemWidth+'px',height:dragItemHeight+'px'}"
          class="drag" v-show="isDragShow" ref="dragBox">
          <div class="drag-move">
            <div class="logo"><img :src="imgList[activeDrag.grade-1]" /></div>
          </div>
        </div>
      </div>
    </div>
    <div class="drag-bottom">
      <button class="btn-left" @click="isCollectShow = true"><label class="text">博物馆</label>
        <div class="heart" style="margin-top: 18px;"></div>
      </button>
      <button class="flex btn-bottom" @click="createItem(buyGrade)">LV.{{buyGrade}}<br />{{toShowMoney(bugNowMoney[buyGrade-1])}}</button>
      <button class="flex btn-bottom" style="font-size: 18px;">商店</button>
      <button class="btn-right">
        <span></span>
        <label>回收</label>
      </button>
    </div>

    <!-- 收藏 -->
    <div class="collect" v-show="isCollectShow">
      <div class="collect-main">
        <div class="top">
          <div class="logo"><img :src="imgList[collectIndex]"></div>
          <div class="label-box">
            <div>LV.{{collectIndex+1}}</div>
            <div>速度:{{toShowMoney(getAddNum(collectIndex+1))}}/秒</div>
            <div>金额:{{toShowMoney(getBuyMoney(collectIndex+1,true))}}</div>
          </div>
        </div>
        <div class="content">
          <div class="item content-center" :class="{'active':collectIndex == index}" v-for="(item,index) in bugNowMoney"
            :key="index" @click="collectIndex = index">
            <div class="grade">{{index+1}}</div>
            <div class="logo"><img :class="{'my-gray': index+1 > maxGrade}" :src="imgList[index]"></div>
          </div>
        </div>
        <div class="bottom content-center">
          <div class="btn" @click="isCollectShow = false">返回</div>
        </div>
      </div>
    </div>
    <!-- 商店 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 默认参数
      width: 0,
      height: 0,
      dragMianHeight: 0,
      dragMianWidth: 0,
      dragItemHeight: 0,
      dragItemWidth: 0,
      isDragShow: false,
      activeDrag: {
        left: 0,
        top: 0,
        index: 0,
        grade: 1
      },
      dragList: [],
      bugNowMoney: [],
      money: 10000,
      maxGrade: 1,
      isMoneyShow: false,
      time: 2000,
      imgList: [
        require("@/assets/img/g1.png"),
        require("@/assets/img/g2.png"),
        require("@/assets/img/g3.png"),
        require("@/assets/img/g4.png"),
        require("@/assets/img/g5.png"),
        require("@/assets/img/g6.png"),
        require("@/assets/img/g7.png"),
        require("@/assets/img/g8.png"),
        require("@/assets/img/g9.png"),
        require("@/assets/img/g10.png"),
        require("@/assets/img/g11.png"),
        require("@/assets/img/g12.png"),
        require("@/assets/img/g13.png"),
        require("@/assets/img/g14.png"),
        require("@/assets/img/g15.png"),
        require("@/assets/img/g16.png"),
        require("@/assets/img/g17.png"),
        require("@/assets/img/g18.png"),
        require("@/assets/img/g19.png"),
        require("@/assets/img/g20.png"),
        require("@/assets/img/g1.png"),
        require("@/assets/img/g2.png"),
        require("@/assets/img/g3.png"),
        require("@/assets/img/g4.png"),
        require("@/assets/img/g5.png"),
        require("@/assets/img/g6.png"),
        require("@/assets/img/g7.png"),
        require("@/assets/img/g8.png"),
        require("@/assets/img/g9.png"),
        require("@/assets/img/g10.png"),
        require("@/assets/img/g11.png"),
        require("@/assets/img/g12.png"),
        require("@/assets/img/g13.png"),
        require("@/assets/img/g14.png"),
        require("@/assets/img/g15.png"),
        require("@/assets/img/g16.png"),
        require("@/assets/img/g17.png"),
        require("@/assets/img/g18.png"),
        require("@/assets/img/g19.png"),
        require("@/assets/img/g20.png"),
        require("@/assets/img/g1.png"),
        require("@/assets/img/g2.png"),
        require("@/assets/img/g3.png"),
        require("@/assets/img/g4.png"),
        require("@/assets/img/g5.png"),
        require("@/assets/img/g6.png"),
        require("@/assets/img/g7.png"),
        require("@/assets/img/g8.png"),
        require("@/assets/img/g9.png"),
        require("@/assets/img/g10.png"),
        require("@/assets/img/g11.png"),
        require("@/assets/img/g12.png"),
        require("@/assets/img/g13.png"),
        require("@/assets/img/g14.png"),
        require("@/assets/img/g15.png"),
        require("@/assets/img/g16.png"),
        require("@/assets/img/g17.png"),
        require("@/assets/img/g18.png"),
        require("@/assets/img/g19.png"),
        require("@/assets/img/g20.png"),
        require("@/assets/img/g1.png"),
        require("@/assets/img/g2.png"),
        require("@/assets/img/g3.png"),
        require("@/assets/img/g4.png"),
        require("@/assets/img/g5.png"),
        require("@/assets/img/g6.png"),
        require("@/assets/img/g7.png"),
        require("@/assets/img/g8.png"),
        require("@/assets/img/g9.png"),
        require("@/assets/img/g10.png"),
        require("@/assets/img/g11.png"),
        require("@/assets/img/g12.png"),
        require("@/assets/img/g13.png"),
        require("@/assets/img/g14.png"),
        require("@/assets/img/g15.png"),
        require("@/assets/img/g16.png"),
        require("@/assets/img/g17.png"),
        require("@/assets/img/g18.png"),
        require("@/assets/img/g19.png"),
        require("@/assets/img/g20.png"),
        require("@/assets/img/g1.png"),
        require("@/assets/img/g2.png"),
        require("@/assets/img/g3.png"),
        require("@/assets/img/g4.png"),
        require("@/assets/img/g5.png"),
        require("@/assets/img/g6.png"),
        require("@/assets/img/g7.png"),
        require("@/assets/img/g8.png"),
        require("@/assets/img/g9.png"),
        require("@/assets/img/g10.png"),
        require("@/assets/img/g11.png"),
        require("@/assets/img/g12.png"),
        require("@/assets/img/g13.png"),
        require("@/assets/img/g14.png"),
        require("@/assets/img/g15.png"),
        require("@/assets/img/g16.png"),
        require("@/assets/img/g17.png"),
        require("@/assets/img/g18.png"),
        require("@/assets/img/g19.png")
      ],
      isCollectShow: false,
      collectIndex: 0
    };
  },
  methods: {
    initData() {
      this.dragList = [];
      for (let i = 0; i < 12; i++) {
        var obj = {
          grade: null,
          timer: null,
          isShow: false
        };
        this.dragList.push(obj);
      }
      let buyTemp = [];
      for (let i = 0; i < this.imgList.length; i++) {
        buyTemp.push(this.getBuyMoney(i + 1, true));
      }
      this.bugNowMoney = this.read("bugNowMoney") || buyTemp;
      this.maxGrade = this.read("maxGrade") || 1;
      this.money = this.read("money") || 10000;
      let dragList = this.read("dragList") || this.dragList;
      dragList.forEach(item => {
        if (item.grade != null) this.initItem(item.grade);
      });
      // 离线加的收益
      let now = new Date().getTime();
      let lastTime = this.read("lastTime") || new Date().getTime();
      let s = (now - lastTime) / 1000;
      if (s > 300) {
        this.money += s * this.sumAddMoney;
      }
    },
    resize() {
      this.width = window.innerWidth;
      this.height = window.innerHeight;
      this.dragMianHeight = window.innerHeight * 0.55;
      this.dragMianWidth = window.innerWidth;
      this.dragItemHeight = this.dragMianHeight / 3;
      this.dragItemWidth = this.dragMianWidth / 4;
    },
    drag({ isStart, isEnd, startTouches, endTouches, disX, disY }, e) {
      let dom = this.$refs.dragBox;
      if (isStart) {
        let x = parseInt(startTouches.x / this.dragItemWidth);
        let y = parseInt(
          (startTouches.y - this.height / 4) / this.dragItemHeight
        );
        this.activeDrag.left = x * this.dragItemWidth + "px";
        this.activeDrag.top = y * this.dragItemHeight + this.height / 4 + "px";

        // start
        let id = 4 * y + x;
        this.activeDrag.index = id;

        if (this.dragList[this.activeDrag.index].grade != null) {
          this.activeDrag.grade = this.dragList[this.activeDrag.index].grade;
          this.isDragShow = true;
        }
      } else if (isEnd) {
        this.isDragShow = false;
        dom.style.transform = "translate3d(0,0,0)";
        // 移动到删除 回收那边
        if (
          endTouches.x > this.width - 66 &&
          endTouches.x < this.width &&
          endTouches.y > this.height - 76 &&
          endTouches.y < this.height
        ) {
          this.money +=
            this.getBuyMoney(this.dragList[this.activeDrag.index].grade, true) *
            0.8;
          this.dragList[this.activeDrag.index].grade = null;
          if (this.dragList[this.activeDrag.index].timer != null) {
            clearInterval(this.dragList[this.activeDrag.index].timer);
            this.dragList[this.activeDrag.index].timer = null;
          }
          return;
        }
        if (
          endTouches.x < 0 ||
          endTouches.x > this.width ||
          endTouches.y < this.height / 4 ||
          endTouches.y > this.height / 4 + this.dragMianHeight
        )
          return;

        let x = parseInt(endTouches.x / this.dragItemWidth);
        let y = parseInt(
          (endTouches.y - this.height / 4) / this.dragItemHeight
        );

        // end
        let endId = 4 * y + x;
        let startId = this.activeDrag.index;
        if (endId != startId) {
          if (
            this.dragList[endId].grade == null &&
            this.dragList[startId].grade != null
          ) {
            this.dragList[endId].grade = this.dragList[startId].grade;
            this.dragList[startId].grade = null;
            this.dragList[endId].timer = this.createInterval(endId);
            this.dragList[startId].timer = this.createInterval(startId);
          } else {
            if (
              this.dragList[endId].grade != null &&
              this.dragList[startId].grade != null &&
              this.dragList[endId].grade == this.dragList[startId].grade
            ) {
              this.dragList[endId].grade += 1;
              this.dragList[startId].grade = null;
              if (this.dragList[endId].timer != null) {
                clearInterval(this.dragList[endId].timer);
                this.dragList[endId].timer = null;
              }
              if (this.dragList[startId].timer != null) {
                clearInterval(this.dragList[startId].timer);
                this.dragList[startId].timer = null;
              }
              this.dragList[endId].timer = this.createInterval(endId);
              let result = 0;
              this.dragList.forEach((item, index) => {
                result = Math.max(item.grade, result);
              });
              this.maxGrade = result > this.maxGrade ? result : this.maxGrade;
              this.save("bugNowMoney", this.bugNowMoney);
              this.save("dragList", this.dragList);
              this.save("maxGrade", this.maxGrade);
            }
          }
        }
      } else {
        if (this.dragList[this.activeDrag.index].grade != null)
          dom.style.transform = "translate3d(" + disX + "px," + disY + "px,0)";
      }
    },
    initItem(grade) {
      let temp = 1;
      if (typeof grade == "number" && grade > 1) temp = grade;
      for (var i = 0; i < this.dragList.length; i++) {
        if (this.dragList[i].grade == null) {
          this.dragList[i].grade = temp;
          if (this.dragList[i].timer != null) {
            clearInterval(this.dragList[i].timer);
            this.dragList[i].timer = null;
          }
          this.dragList[i].timer = this.createInterval(i);
          break;
        }
      }
      let result = 0;
      this.dragList.forEach((item, index) => {
        result = Math.max(item.grade, result);
      });
      this.maxGrade = result > this.maxGrade ? result : this.maxGrade;
      this.save("dragList", this.dragList);
      this.save("maxGrade", this.maxGrade);
    },
    createItem(type) {
      let temp = 1;
      if (typeof type == "number" && type > 1) temp = type;
      if (this.bugNowMoney[this.buyGrade - 1] > this.money) {
        alert("金币不够");
        return;
      } else {
        this.money -= this.bugNowMoney[this.buyGrade - 1];
      }
      let flag = false;
      for (var i = 0; i < this.dragList.length; i++) {
        if (this.dragList[i].grade == null) {
          this.dragList[i].grade = temp;
          if (this.dragList[i].timer != null) {
            clearInterval(this.dragList[i].timer);
            this.dragList[i].timer = null;
          }
          this.dragList[i].timer = this.createInterval(i);
          flag = true;
          break;
        }
      }

      if (flag) {
        this.bugNowMoney[this.buyGrade - 1] = this.getBuyMoney(
          this.bugNowMoney[this.buyGrade - 1],
          false
        );
        let result = 0;
        this.dragList.forEach((item, index) => {
          result = Math.max(item.grade, result);
        });
        this.maxGrade = result > this.maxGrade ? result : this.maxGrade;
        this.save("bugNowMoney", this.bugNowMoney);
        this.save("dragList", this.dragList);
        this.save("maxGrade", this.maxGrade);
      }
    },
    toShowMoney(num) {
      let n = 0;
      const d = [
        "",
        "万",
        "亿",
        "兆",
        "京",
        "垓",
        "秭",
        "穰",
        "沟",
        "涧",
        "正",
        "载",
        "极"
      ];
      while (num > 10000) {
        num /= 10000;
        n++;
      }
      return Number(num).toFixed(1) + d[n];
    },
    getAddNum(grade) {
      if (grade < 1) {
        return 0;
      }
      let result = 4;
      for (let i = 0; i < grade - 1; i++) {
        result *= 2.18;
      }
      return Math.ceil(result);
    },
    getBuyMoney(grade, isFirst) {
      if (isFirst) {
        if (grade == 1) return 100;
        if (grade == 2) return 1500;
        let result = 6750;
        for (let i = 0; i < grade - 3; i++) {
          result *= 2.6;
        }
        return Math.ceil(result);
      } else {
        return Math.ceil((grade * 118) / 100);
      }
    },
    createInterval(index) {
      if (this.dragList[index].grade == null) {
        if (this.dragList[index].timer) {
          clearInterval(this.dragList[index].timer);
        }
        return null;
      }
      return setInterval(() => {
        this.money += this.getAddNum(this.dragList[index].grade) * 2;
        this.dragList[index].isShow = true;
        setTimeout(() => {
          this.dragList[index].isShow = false;
        }, 500);
      }, this.time);
    },
    save(key, value) {
      var data = {
        data: value
      };
      try {
        localStorage.setItem("game_" + key, JSON.stringify(data));
      } catch (e) {
        console.log(e);
      }
    },
    read(key) {
      var data = JSON.parse(localStorage.getItem("game_" + key));
      return data && data.data;
    }
  },
  computed: {
    buyGrade() {
      if (this.maxGrade < 5) return 1;
      else return this.maxGrade - 4;
    },
    sumAddMoney() {
      let result = 0;
      this.dragList.forEach((item, index) => {
        if (item.grade != null) result += this.getAddNum(item.grade);
      });
      return result;
    }
  },
  watch: {
    money(curVal, oldVal) {
      this.isMoneyShow = true;
      this.save("money", curVal);
      this.save("lastTime", new Date().getTime());
      setTimeout(() => {
        this.isMoneyShow = false;
      }, 210);
    }
  },
  mounted() {
    this.resize();
    this.initData();
  },
  components: {}
};
</script>

<style>
.main {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ffcebf;
}
.flex {
  flex: 1;
}
.my-gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
}
.main .max-logo {
  position: fixed;
  right: 8%;
  top: 2%;
  width: 33%;
}
.main .max-grade {
  position: fixed;
  right: 35%;
  top: 15%;
  border: 2px solid;
  border-radius: 33%;
  font-size: 15px;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  background-color: #fa8b7c;
}
.main .max-logo img {
  width: 100%;
}
.main .text-box {
  display: block;
  height: 35px;
  width: 40%;
  text-align: center;
  line-height: 35px;
  padding: 0px 5px;
  color: #e7e2d1;
  background: #927d73;
  border: 2px solid #63402e;
  margin: 10px 0 0 10px;
  border-radius: 25px;
}
.main .money {
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
.main .money.active {
  transform: translate3d(0, -3px, 0);
  -webkit-transform: translate3d(0, -3px, 0);
  -moz-transform: translate3d(0, -3px, 0);
  -o-transform: translate3d(0, -3px, 0);
}
.drag-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
  background-color: #fdf7e9;
  display: flex;
  background-color: #fdf7e9;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.drag-mian {
  position: fixed;
  top: 25%;
  height: 55%;
  left: 0;
  right: 0;
  z-index: 999;
}
.drag-mian .drag-box {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  z-index: 999;
}
.drag-box .drag {
  position: fixed;
  z-index: 99999;
}
.drag-box .drag .drag-move {
  position: relative;
  width: 100%;
  height: 100%;
}
.drag-box .drag .drag-move .logo {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  left: 18px;
  right: 8px;
}
.drag-box .drag .drag-move .logo img {
  width: 100%;
}
.drag-box .item {
  width: 24%;
  height: 32%;
  position: relative;
}
.drag-box .item .grade {
  color: #fff;
  position: absolute;
  background-color: #fa8b7c;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 35%;
  left: 12px;
  bottom: 18px;
  line-height: 18px;
  border: 1px solid;
  z-index: 5;
}
.drag-box .item .ellipse {
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: 5px;
  height: 30px;
  background: #b39186;
  border-radius: 50%;
}
.drag-box .item .logo {
  position: absolute;
  bottom: 10px;
  z-index: 3;
  left: 18px;
  right: 8px;
}
.drag-box .item .logo img {
  width: 100%;
  transition: all 0.2s ease-in;
}
.drag-box .item .logo img.active {
  transform: scale(1.1);
}
.drag-box .item .add-money {
  color: #63402e;
  text-align: center;
  margin-top: 18px;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
}
.drag-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  display: flex;
  flex-wrap: wrap-reverse;
}
.drag-bottom button {
  outline: none;
}
.drag-bottom .btn-bottom {
  margin: 8px;
  height: 45px;
  background: #ffb6cb;
  border: 3px solid #63402e;
  border-radius: 50px;
  color: #a7676f;
  font-weight: 600;
}
.drag-bottom .btn-left {
  background: #ffb6cb;
  border: 3px solid #63402e;
  border-radius: 5px;
  color: #a7676f;
  width: 56px;
  height: 54px;
  margin: 8px;
  position: relative;
}
.heart {
  position: relative;
  width: 16px;
  height: 16px;
  background: #fff;
  margin: 8px auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}
.heart::before,
.heart::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 16px;
  display: block;
  border-radius: 50%;
  background: #fff;
}
.heart::before {
  left: -8px;
  bottom: 0;
}
.heart::after {
  top: -8px;
  right: 0;
}
.drag-bottom .btn-left .text {
  position: absolute;
  top: -10px;
  width: 48px;
  left: 1px;
  color: #fff;
  background: #a7676f;
  border-radius: 25px;
}
.drag-bottom .btn-right {
  background: #dddcdb;
  border: 4px solid #703820;
  border-radius: 5px;
  width: 50px;
  height: 60px;
  margin: 8px;
  position: relative;
  z-index: 50;
}
.drag-bottom .btn-right::before {
  content: " ";
  position: absolute;
  bottom: -10px;
  height: 0;
  left: -8px;
  right: -8px;
  background: #dddcdb;
  border: 4px solid #703820;
  height: 15px;
  border-radius: 5px;
  z-index: 40;
}
.drag-bottom .btn-right label {
  position: absolute;
  bottom: 7px;
  text-align: center;
  background: #662c05;
  color: #fff;
  left: 3px;
  border-radius: 5px;
  right: 3px;
}
.drag-bottom .btn-right span {
  position: absolute;
  top: 3px;
  background: #8bcf9e;
  border: 3px solid #703820;
  left: 9px;
  height: 10px;
  border-radius: 5px;
  right: 9px;
}
.main .collect {
  position: fixed;
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: 1px;
  background: #fdf7e9;
  z-index: 999;
  border: 7px solid #6f5143;
  border-radius: 5px;
  display: inline-grid;
}
.main .collect .collect-main {
  border-bottom: 10px dotted #ffcebf;
  border-top: 10px dotted #ffcebf;
  margin: 5px;
  position: relative;
}
.main .collect .collect-main .top {
  height: 30%;
  padding: 15px;
  position: relative;
}
.main .collect .collect-main .top .label-box {
  position: absolute;
  right: 0;
  top: 15px;
  bottom: 15px;
  width: 150px;
}
.main .collect .collect-main .top .label-box > div {
  display: block;
  height: 35px;
  text-align: center;
  line-height: 35px;
  padding: 0px 5px;
  color: #070605;
  width: 90%;
  background: #ffe6d6;
  margin: 12px 0 0 10px;
  border-radius: 25px;
}
.main .collect .collect-main .top .logo {
  height: 100%;
}
.main .collect .collect-main .top .logo img {
  height: 100%;
}
.main .collect .collect-main .content {
  position: absolute;
  top: 30%;
  height: 60%;
  left: 0;
  right: 0;
  background: #e5dfd1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  overflow: auto;
  padding: 4px 0;
}
.main .collect .collect-main .content .item {
  width: 30%;
  height: 32%;
  position: relative;
  background: #eee5b3;
  border: 1px solid #1f4861;
  margin-bottom: 5px;
  border-radius: 8px;
}
.main .collect .collect-main .content .item .logo {
  height: 90px;
  width: 80px;
  margin-top: 10px;
}
.main .collect .collect-main .content .item .grade {
  position: absolute;
  left: 8px;
  top: 8px;
  font-size: 15px;
  font-weight: 600;
}
.main .collect .collect-main .content .item .logo img {
  width: 100%;
}

.main .collect .collect-main .content .item.active {
  background: #f5b991;
}
.main .collect .collect-main .bottom {
  position: absolute;
  top: 90%;
  height: 10%;
  left: 0;
  right: 0;
  /* background: #789; */
}
.main .collect .collect-main .bottom .btn {
  height: 40px;
  text-align: center;
  background: #ffb6cb;
  border: 2px solid #63402e;
  border-radius: 50px;
  color: #130d0e;
  width: 75px;
  font-weight: 600;
  line-height: 35px;
}

.my-transition-enter-active {
  transition: all 0.1s ease;
}
.my-transition-leave-active {
  transition: all 0.2s ease-in-out;
}
.my-transition-enter {
  transform: translate3d(0, 5px, 0);
  opacity: 0;
}
.my-transition-leave-to {
  opacity: 0;
}
</style>
